/* eslint-disable react-hooks/rules-of-hooks */

import  { useState } from 'react';

import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { menu } from '../../router';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;
function index() {
    const {pathname}=useLocation()
    const nav=useNavigate()
    const render = (arr: any) => {
        return arr.map((item: any) => {
            return {
            key:item.path,
            icon:item.icon,
            children:item.children?render(item.children):null,
            label:item.title,
        }
        })
}
const items = render(menu)
const [collapsed, setCollapsed] = useState(false);
const {
    token: { colorBgContainer, borderRadiusLG },
} = theme.useToken();
return (
    <div>
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <Menu theme="dark" defaultSelectedKeys={[pathname]} mode="inline" items={items} onClick={({key})=>nav(key)}/>
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }} />
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        
                        <Outlet/>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    </div>
)
}

export default index
